﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="../js/header.js"></script>
    <title>登录页面</title>
    <style type="text/css">
        body {
            background: url(../images/login_back.png) no-repeat center center;
            background-size: cover;
            background-attachment: fixed;

        }

        .logo {
            float: left;
            width: 140px;
            height: 140px;

        }

        .title {
            float: left;
            margin-top: 35px;
            margin-left: 19px;
            font-family: PingFangSC-Semibold;
            font-size: 50px;
            color: #FFFFFF;
            letter-spacing: 0px;
            line-height: 70px;

        }

        .login_title {
            margin-top: 21px;
            width: 100%;
            height: 48px;
            text-align: center;
            font-family: PingFangSC-Semibold;
            font-size: 34px;
            color: #323232;
            letter-spacing: 0px;
            line-height: 48px;
        }

        .demo-ruleForm {
            position: relative;
            overflow: hidden;
            margin: 49px auto 100px;
            width: 587px;
            height: 517px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 10px;

        }

        .name {
            margin-left: 77px;
            margin-top: 23px;
            width: 432px;
            height: 60px;
        }

        .pass {
            margin-left: 77px;
            margin-top: 33px;
            width: 432px;
            height: 60px;
        }

        .formitem {
            background: rgba(255, 255, 255, 0.00);
            border: 0px solid #AEAEAE;
            border-radius: 10px;
        }

        .verify_css {
            margin-left: 0;
            width: 291px;
        }

        .yanzhengma {
            position: relative;
            top: 13px;
        }

        .login_btn_text {
            font-family: MicrosoftYaHei;
            font-size: 28.19px;
            color: #FFFFFF;
            letter-spacing: 0;
        }

        .login-button {
            margin-left: 77px;
            margin-top: 23.4px;
            width: 432px;
            height: 65px;
            background-image: linear-gradient(90deg, #1D5899 0%, #157DD4 100%);
            border-radius: 10px;
        }

        .toregist {
            margin-right: 59px;
            /*	margin-bottom: 35px;*/
            font-family: PingFangSC-Medium;
            font-size: 14px;
            color: #323232;
            letter-spacing: 0;

        }

        .verify_all {
            margin-left: 77px;
            margin-top: 28px;
            width: 432px;
            height: 59.6px;

        }

    </style>
</head>

<body>
<div id="app" style="min-width: 1100px;">
    <el-row type="flex" justify="center">
        <el-col :span="24" style="margin-top: 101px; text-align: center;">
            <div style="display: inline-block;">
                <img src="../images/loginlogo.png" class="logo">
                <span class="title">中国地震局“互联网+监管”公共服务平台</span>
                <div style="clear: both;"></div>
            </div>
        </el-col>
    </el-row>
    <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" class="demo-ruleForm"
             @keyup.native.enter="submitForm('loginForm')">
        <h3 class="login_title">登&emsp;录</h3>
        <el-form-item class="name formitem" prop="loginName">
            <el-input prefix-icon="el-icon-user" v-model.trim="loginForm.loginName" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item class="pass formitem" prop="password">
            <el-input prefix-icon="el-icon-key" placeholder="请输入密码" v-model.trim="loginForm.password"
                      show-password></el-input>
        </el-form-item>
        <!--<el-form-item class="formitem verify_all" prop="verifyCode" >
            <el-input class="verify_css" placeholder="请输入4位验证码" v-model="loginForm.verifyCode" @keyup.enter.native="submitForm('ruleForm')"></el-input>
            <span class="yanzhengma" id="v_container"></span>
        </el-form-item>-->
        <el-form-item>
            <el-button class="login-button" type="primary" @click="submitForm('loginForm')">
                <span class="login_btn_text">登&nbsp;录</span>
            </el-button>
        </el-form-item>
        <!--<el-form-item style="text-align: right;">
            <span class="toregist">还没账户，请<a href="register.html">注册</a></span>
        </el-form-item>-->
        <!--<el-form-item style="float: right;">
            <div class="toregist">若没有账号，请使用游客账号登录</div>
            <div class="toregist">账号：<span style="margin-right: 1em;color: #002d5d;font-weight: bold;">youke</span>
                密码：<span style="color: #002d5d;font-weight: bold;">111111</span></div>
        </el-form-item>-->
    </el-form>
</div>
<script>

    var login = new Vue({
        el: '#app',
        data() {
            let checkCode = (rule, value, callback) => {
                var verifyFlag = this.verifyCode.validate(value);
                if (!verifyFlag) {
                    callback(new Error('验证码不正确'));
                } else {
                    callback();
                }
            }
            return {
                loginForm: {
                    loginName: "",
                    password: "",
                    verifyCode: "",
                },
                rules: {
                    loginName: [{
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    }, //触发
                        {
                            min: 2,
                            max: 50,
                            message: '长度在 2 到 50 个字符',
                            trigger: 'blur'
                        }
                    ],
                    password: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }, //触发
                        {
                            min: 6,
                            message: '密码不小于6位',
                            trigger: 'blur'
                        }
                    ],
                    verifyCode: [{
                        required: true,
                        message: '请输入验证码',
                        trigger: 'blur'
                    }, {
                        validator: checkCode,
                        trigger: 'blur'
                    }]
                }
            }
        },
        mounted() {
            this.verifyCode = new GVerify('v_container')
        },
        methods: {

            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            submitForm(formName) {
                // 获取验证码
                /*var verifyCode = this.ruleForm.verifyCode;
                var verifyFlag = this.verifyCode.validate(verifyCode);
                if(!verifyFlag) {
                    that.$message.error({
                        title: '系统提示',
                        message: '验证码输入错误'
                    })
                }*/
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        localStorage.setItem("pwd",JSON.stringify(this.loginForm.password));
                        var encrypt = new JSEncrypt();
                        encrypt.setPublicKey(publicKey);
                        let result = encrypt.encrypt(this.loginForm.password);
                        //this.loginForm.password = result;
                        //this.loginForm.appCode = appCode;
                        axios({
                            method: 'post',
                            url: appBaseUrl + '/login/doLogin',
                            // url: 'http://10.13.16.135:8081/base/user/doLogin',
                            data: {
                                password: result,
                                appCode: appCode,
                                loginName: this.loginForm.loginName,

                            }
                        })
                            .then(response => {
                                let data = response.data;
                                if (data.code == 200) {
                                    localStorage.setItem("userInfo", JSON.stringify(data.data));
                                    location.href = location.origin + appBaseUrl + '/index.html';
                                    localStorage.setItem("preurl", JSON.stringify(data.preurl));
                                } else {
                                    this.$message.error(data.msg);
                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    } else {
                        console.log("login error!!");
                        return false;
                    }
                });
            }
        }
    })
</script>
</body>

</html>